// =========================  标签管理 ==================== 
// 分页数据
let peizhishu = {
    tagname: "",
    page: "1",//起始页
    limit: "10"//每页条数
}
const layer = layui.layer
const form = layui.form
let laypage = layui.laypage;
// === 获取列表内容 渲染到页面上 =======
xuanyanyemian()
function xuanyanyemian() {
    axios.get('/ydd_tag/list', { params: peizhishu }).then((res) => {
        console.log(res.data.data);
        let news = res.data.data.data.map(({ id, tagname, }, index) => {
            return `
                <tr>
                    <td>${index + 1}</td>
                    <td>${id}</td>
                    <td>${tagname}</td>
                    <td>
                        <div class="yuan1">
                        <i class="layui-icon layui-icon-edit" style="font-size: 15px; color: #ffff;" id="xiougai" data-id=${id}></i>
                        </div>
                        <div class="yuan2">
                        <i class="layui-icon layui-icon-delete" style="font-size: 15px; color: #ffff;" id="shanchu" data-id=${id}></i>
                        </div>
    
                    </td>
                    </tr>
            `
        })

        $('#leishen').html(news.join(''))
        // 分页功能
        fenye(res.data.data.count)
    })
}
// 分页=====================================

function fenye(count) {
    console.log(count);
    //执行一个laypage实例
    laypage.render({
        elem: 'page-box', //注意，这里的 test1 是 ID，不用加 # 号
        count, //数据总数，从服务端得到
        limit: peizhishu.limit,//每页的条数
        limits: [1, 2, 4, 6, 10],// 每页条数的选择
        curr: peizhishu.page,//起始页
        layout: ["count", 'limit', 'prev', 'page', 'next', 'skip'],//自定义排版
        jump: function (obj, first) {
            //分页切换会触发涂改回调函数

            //obj包含了当前分页的所有参数，比如：
            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            console.log(obj.limit); //得到每页显示的条数
            peizhishu.limit = obj.limit
            peizhishu.page = obj.curr
            //首次不执行
            if (!first) {
                //do something
                xuanyanyemian()
            }
        }
    });
}
// 添加功能
const indeeseet = `
<form id="addForm" class="layui-form" >
<div class="layui-form-item">
                  <div class="layui-col-md10">
                        <label class="layui-form-label">标签名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="tagname" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                            class="layui-input">
                        </div>
                 </div>
           </div>

           <div class="layui-form-item">
           <div class="layui-input-block">
             <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
             <button type="reset" class="layui-btn layui-btn-primary">取消</button>
           </div>
         </div>
</form>
`

let indexinss
$('#xingzeng').on('click', function () {
    // console.log(layer);
    //彈出框
    indexinss = layer.open({
        title: '添加标签', // 标题
        type: 1, // 页面层
        area: ['500px', '150px'], // 定宽高
        content: indeeseet,
    });
})

// 一时间委托的形式给form表单注册点击事件
$('body').on('submit', '#addForm', function (e) {
    e.preventDefault()
    // 收集表单数据
    const data = $(this).serialize()
    // console.log(data);
    // 发起请求
    axios.post('/ydd_tag/add', data).then((res) => {
        // console.log(res.data.errno);
        if (!res.data.errno === 0) return layer.msg('失败')

        layer.msg('成功')
        xuanyanyemian()
        // 通过索引关闭页面
        layer.close(indexinss)
    })
})
// 编辑=========================================
const hvbwvibwieih = `
<form id="addForm" class="layui-form" lay-filter="dataform" >
<input name="id" style="display:none;">
<div class="layui-form-item">
                  <div class="layui-col-md10">
                        <label class="layui-form-label">标签名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="tagname" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                            class="layui-input">
                        </div>
                 </div>
           </div>

           <div class="layui-form-item">
           <div class="layui-input-block">
             <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
             <button type="reset" class="layui-btn layui-btn-primary">取消</button>
           </div>
         </div>
</form>
`

let ressinss
$('#leishen').on("click", '#xiougai', function () {
    //获取
    let Id = $(this).attr('data-id')
    // console.log(Id);

    axios.get(`/ydd_tag/rowInfo?id=${Id}`).then((res) => {
        // console.log(res.data.data);

        form.val("dataform", res.data.data);
    })
    //彈出框
    ressinss = layer.open({
        title: '修改标签', // 标题
        type: 1, // 页面层
        area: ['500px', '150px'], // 定宽高
        content: hvbwvibwieih,
    });

})
//更新=================
$('body').on("submit", "#addForm", function (e) {
    e.preventDefault()
    let data = $(this).serialize()
    console.log(data);
    axios.post('/ydd_tag/update', data).then((res) => {
        console.log(res.data.errno);
        if (!res.data.errno === 0) return layer.msg('失败')

        layer.msg('成功')
        xuanyanyemian()
        // 通过索引关闭页面
        layer.close(ressinss)
    })
})

// 删除====================================
$('#leishen').on('click', '#shanchu', function () {
    let id = $(this).attr("data-id")
    axios.get(`/ydd_tag/del?id=${id}`).then((res) => {
        console.log(res.data.errno);
        if (!res.data.errno === 0) return layer.msg('失败')

        layer.msg('成功')
        xuanyanyemian()
        // 通过索引关闭页面
    })
})


// 搜索========
let yuansu = {
    tagname: '',
    page: 1,
    limit: 10
}
$('#chaxun').on('click', function () {
    yuansu.tagname = $('#guanjianzi').val()
    console.log(111, yuansu.tagname);
    axios.get('/ydd_tag/list', { params: yuansu }).then((res) => {
        console.log(res.data.data);
        let news = res.data.data.data.map(({ id, tagname, }, index) => {
            return `
                <tr>
                    <td>${index + 1}</td>
                    <td>${id}</td>
                    <td>${tagname}</td>
                    <td>
                        <div class="yuan1">
                        <i class="layui-icon layui-icon-edit" style="font-size: 15px; color: #ffff;" id="xiougai" data-id=${id}></i>
                        </div>
                        <div class="yuan2">
                        <i class="layui-icon layui-icon-delete" style="font-size: 15px; color: #ffff;" id="shanchu" data-id=${id}></i>
                        </div>
    
                    </td>
                    </tr>
            `
        })

        $('#leishen').html(news.join(''))
        // 分页功能
        fenye(res.data.data.count)

        $('#guanjianzi').val('')
    })
})
// 搜索隐藏
$('#hidden').on('click', function () {
    $('#hiddenes').toggle()
    $('.xinzeng').toggleClass('m_270')
})